<template>
	<div>
		<el-form ref="form3" :model="form" :rules="rules" label-width="100px" label-position="top">
			<el-row :gutter="30">
				<el-col :span="24" v-if="applicationType == 3">
					<el-form-item label="公司标准模版" prop="newTemplateObj.value">
						<div>
							<el-select
								v-model="form.newTemplateObj"
								value-key="value"
								placeholder="请选择公司标准模版"
								style="width: 20%"
								@change="getCompanyContractTemplateDetail"
								:loading="loading"
								:disabled="state == 'readonly'">
								<el-option
									v-for="item in list"
									:key="item.value"
									:label="item.label"
									:value="item"></el-option>
							</el-select>
							<el-button
								v-if="form.newTemplateObj && form.newTemplateObj.value"
								style="margin-left: 15px"
								type="text"
								@click="goTemplateDetail">
								查看
							</el-button>
							<el-button
								v-if="
									form.newTemplateObj &&
									form.newTemplateObj.value &&
									type == 'preview'
								"
								style="margin-left: 15px"
								type="text"
								@click="downloadTemplate">
								下载
							</el-button>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-else-if="applicationType == 4">
					<el-form-item
						label="公司客户模版"
						prop="contractAnnex"
						:rules="[
							{
								required: true,
								message: '请上传附件',
								trigger: 'change',
							},
						]">
						<div class="flex">
							<!--                            <image-common info="上传附件" :limit="20" v-model="form.contractAnnex"></image-common>-->
							<word-upload
								info="上传附件"
								:limit="1"
								is-show-tip
								v-model="form.contractAnnex"
								@uploadSuccess="uploadSuccess"
								:disabled="state == 'readonly'"></word-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item>
						<el-checkbox
							v-model="form.onlyThis"
							:true-label="1"
							:false-label="2"
							:disabled="state == 'readonly'">
							仅适用于此额度申请
						</el-checkbox>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="相关配置">
						<el-row :gutter="20">
							<el-col :span="8">
								<div class="agreedItem">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">逾期还车</span>
										<e-switch
											v-model="form.overdue"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<el-form-item
										prop="overdueParam"
										:rules="{
											required: true,
											message: '请输入逾期还车规则',
											trigger: ['blur', 'change'],
											validator: (rule, value, callback) =>
												validData(rule, value, callback, form.overdue),
										}">
										<div class="agreedContent flex-row-center">
											逾期日租金:原日租金
											<el-input
												style="width: 100px; margin: 0 8px"
												v-model="form.overdueParam"
												onkeyup="value=value.replace(/[^0-9.]/g,'')"
												@input="checkOverdueParam"
												@blur="overdueParamBlur"
												:disabled="
													state == 'readonly'
														? true
														: form.overdue == 2
														? true
														: false
												"></el-input>
											%
										</div>
									</el-form-item>
								</div>

								<div class="agreedItem">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">异地还车</span>
										<e-switch
											v-model="form.offsite"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<el-form-item
										prop="offsiteParam"
										:rules="{
											required: true,
											message: '请输入异地还车规则',
											trigger: ['blur', 'change'],
											validator: (rule, value, callback) =>
												validData(rule, value, callback, form.offsite),
										}">
										<div class="agreedContent flex-row-center">
											单价:
											<el-input
												style="width: 100px; margin: 0 8px"
												v-model="form.offsiteParam"
												:disabled="
													state == 'readonly'
														? true
														: form.offsite == 2
														? true
														: false
												"
												onkeyup="value=value.replace(/[^0-9.]/g,'')"
												@input="checkOffsiteParam"
												maxlength="9"></el-input>
											元/公里
										</div>
									</el-form-item>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="agreedItem">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">滞纳金</span>
										<e-switch
											v-model="form.lateFee"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<el-form-item
										prop="lateFeeParam"
										:rules="{
											required: true,
											message: '请输入滞纳金计费规则',
											trigger: ['blur', 'change'],
											validator: (rule, value, callback) =>
												validData(rule, value, callback, form.lateFee),
										}">
										<div class="agreedContent flex-row-center">
											计费规则:逾期金额的
											<el-input
												style="width: 100px; margin: 0 8px"
												v-model="form.lateFeeParam"
												:disabled="
													state == 'readonly'
														? true
														: form.lateFee == 2
														? true
														: false
												"
												onkeyup="value=value.replace(/[^0-9.]/g,'')"
												@input="checkLateFeeParam"
												@blur="lateFeeParamBlur"></el-input>
											%
										</div>
									</el-form-item>
								</div>
								<div class="agreedItem">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">超公里费</span>
										<e-switch
											v-model="form.overmileageFee"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<el-form-item
										prop="overmileageFeeParam"
										:rules="{
											required: true,
											message: '请输入超公里费计费规则',
											trigger: ['blur', 'change'],
											validator: (rule, value, callback) =>
												validData(
													rule,
													value,
													callback,
													form.overmileageFee,
												),
										}">
										<div class="agreedContent flex-row-center">
											单价:
											<el-input
												style="width: 100px; margin: 0 8px"
												v-model="form.overmileageFeeParam"
												:disabled="
													state == 'readonly'
														? true
														: form.overmileageFee == 2
														? true
														: false
												"
												onkeyup="value=value.replace(/[^0-9.]/g,'')"
												@input="checkOvermileageFee"
												maxlength="9"></el-input>
											元/公里
										</div>
									</el-form-item>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="agreedItem" style="height: 228px">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">逾期规则(租金)</span>
										<e-switch
											v-model="form.overdueRules"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<div class="agreedContent" style="margin-top: 35px">
										<el-radio-group
											v-model="form.overdueRulesType"
											:disabled="
												state == 'readonly'
													? true
													: form.overdueRules == 2
													? true
													: false
											"
											@change="changeOverdueRulesType">
											<el-radio :label="1">
												<el-form-item
													prop="overdueRulesParam1"
													:rules="{
														required: true,
														message: '请输入逾期规则',
														trigger: ['blur', 'change'],
														validator: (rule, value, callback) =>
															validData1(
																rule,
																value,
																callback,
																form.overdueRules,
																1,
															),
													}">
													<div class="flex-row-center">
														逾期规则:超
														<el-input
															style="width: 80px; margin: 0 8px"
															v-model="form.overdueRulesParam1"
															:disabled="
																state == 'readonly'
																	? true
																	: form.overdueRules == 2
																	? true
																	: false
															"
															onkeyup="value=value.replace(/[^\d||/.]/g,'')"
															oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value==0 && value!=''){value=1}"
															maxlength="6"></el-input>
														自然日未付款
													</div>
												</el-form-item>
											</el-radio>

											<el-radio :label="2" style="margin-top: 15px">
												<el-form-item
													prop="overdueRulesParam2"
													:rules="{
														required: true,
														message: '请输入逾期规则',
														trigger: ['blur', 'change'],
														validator: (rule, value, callback) =>
															validData2(
																rule,
																value,
																callback,
																form.overdueRules,
																2,
															),
													}">
													<div class="flex-row-center">
														逾期规则:次期
														<el-input
															style="width: 80px; margin: 0 8px"
															v-model="form.overdueRulesParam2"
															:disabled="
																state == 'readonly'
																	? true
																	: form.overdueRules == 2
																	? true
																	: false
															"
															onkeyup="value=value.replace(/[^\d||/.]/g,'')"
															oninput="if(value){value=value.replace(/[^\d]/g,'')}  if(value>28){value=28} if(value==0&&value!=''){value=1}"
															:maxlength="2"
															:minlength="1"></el-input>
														日前未付款
													</div>
												</el-form-item>
											</el-radio>
										</el-radio-group>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="agreedItem" style="height: auto">
									<div class="titleInfo flex-row-center-sb">
										<span class="ruleTitle">提前还车</span>
										<e-switch
											v-model="form.earlyReturn"
											:disabled="state == 'readonly'"></e-switch>
									</div>
									<div style="padding-bottom: 20px">
										<el-table
											:data="form.earlyReturnRules"
											:header-cell-style="{
												background: '#FAFAFA',
												color: '#000000',
											}"
											border
											:key="isUpdate">
											<el-table-column
												align="center"
												prop="reasonForEarlyReturn"
												label="提前还车"
												key="reasonForEarlyReturn"
												min-width="160">
												<template v-slot="{ row }">
													<el-form-item
														style="margin-top: 15px; width: 100%"
														label-width="0"
														prop="reasonForEarlyReturn"
														:rules="{
															required: true,
															message: '请选择提前还车原因',
															trigger: ['blur', 'change'],
															validator: (rule, value, callback) =>
																validData(
																	rule,
																	row.reasonForEarlyReturn,
																	callback,
																	form.earlyReturn,
																),
														}">
														<el-select
															v-model="row.reasonForEarlyReturn"
															placeholder="请选择提前还车原因"
															:disabled="
																state == 'readonly'
																	? true
																	: form.earlyReturn == 2
																	? true
																	: false
															">
															<el-option
																v-for="dict in dict.type
																	.reason_for_early_return"
																:label="dict.label"
																:value="parseInt(dict.value)"
																:key="dict.value"></el-option>
														</el-select>
													</el-form-item>
												</template>
											</el-table-column>
											<el-table-column
												align="center"
												prop="leaseTerm"
												label="已履行租期(月)"
												key="leaseTerm"
												min-width="160">
												<template v-slot="{ row }">
													<el-form-item
														style="margin-top: 15px; width: 100%"
														label-width="0"
														prop="leaseTerm"
														:rules="{
															type: 'array',
															required: true,
															message: '请输入已履行租期',
															trigger: ['blur', 'change'],
															validator: (rule, value, callback) =>
																validData(
																	rule,
																	row.leaseTerm,
																	callback,
																	form.earlyReturn,
																),
														}">
														<input-number-range
															v-model="row.leaseTerm"
															separator="/"
															unit="月"
															:type="1"
															@input="changeLeaseTerm(row, $event)"
															:disabled="
																state == 'readonly'
																	? true
																	: form.earlyReturn == 2
																	? true
																	: false
															"></input-number-range>
													</el-form-item>
												</template>
											</el-table-column>
											<el-table-column
												align="center"
												prop="liquidatedDamagesScale"
												label="违约金比例"
												key="liquidatedDamagesScale"
												min-width="250">
												<template v-slot="scope">
													<el-form-item
														style="margin-top: 15px; width: 100%"
														label-width="0"
														prop="liquidatedDamagesScale"
														:rules="{
															required: true,
															message: '请输入违约金比例',
															trigger: ['blur', 'change'],
															validator: (rule, value, callback) =>
																validData(
																	rule,
																	scope.row
																		.liquidatedDamagesScale,
																	callback,
																	form.earlyReturn,
																),
														}">
														<div class="flex-row-center">
															剩余未履行租赁期应支付租金总额的
															<el-input
																style="width: 80px; margin: 0 8px"
																v-model="
																	scope.row.liquidatedDamagesScale
																"
																onkeyup="value=value.replace(/[^0-9.]/g,'')"
																@input="
																	event =>
																		checkLiquidatedDamagesScale(
																			event,
																			scope.$index,
																		)
																"
																@blur="
																	event =>
																		liquidatedDamagesScaleBlur(
																			event,
																			scope.$index,
																		)
																"
																:disabled="
																	state == 'readonly'
																		? true
																		: form.earlyReturn == 2
																		? true
																		: false
																"></el-input>
															%
														</div>
													</el-form-item>
												</template>
											</el-table-column>

											<el-table-column
												align="center"
												prop="fieldDict"
												label="操作"
												min-width="50"
												v-if="state !== 'readonly'">
												<template v-slot="{ $index }">
													<i
														style="color: #1890ff; font-size: 20px"
														class="el-icon-delete"
														@click="deleteEarlyReturnRules($index)"></i>
												</template>
											</el-table-column>
											<template v-slot:append>
												<div class="flex-xy-center" style="height: 30px">
													<el-button
														:disabled="
															state == 'readonly'
																? true
																: form.earlyReturn == 2
																? true
																: false
														"
														type="text"
														icon="el-icon-plus"
														@click="addEarlyReturnRules">
														添加规则
													</el-button>
												</div>
											</template>
										</el-table>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="applicationType == 3">
					<el-form-item label="特殊约定" prop="specialAgreement">
						<el-input
							type="textarea"
							placeholder="请输入特殊约定"
							v-model="form.specialAgreement"
							maxlength="1000"
							:rows="5"
							show-word-limit
							:disabled="state == 'readonly'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="说明" prop="remark">
						<el-input
							type="textarea"
							placeholder="请输入说明"
							v-model="form.remark"
							maxlength="500"
							:rows="5"
							show-word-limit
							:disabled="state == 'readonly'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="附件" prop="annex">
						<image-common
							:up-type="2"
							v-model="form.annex"
							info="上传附件"
							:disabled="state == 'readonly'"></image-common>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import InputNumberRange from '@/components/InputNumberRange/index.vue';
	import { getCompanyStandards } from '@/api/contractTemplate/templateUpdate';
	import * as contractTemplateApi from '@/api/contractTemplate/contractTemplate';
	import { isEmpty } from 'lodash';
	import { checkListNumberInput, checkNumberInput } from '@/utils/utils';

	export default {
		components: { InputNumberRange },
		props: {
			applicationType: {
				type: Number,
				default: 3,
			},
			applicationNo: {
				type: [String, Number],
				default: '',
			},
			customerId: {
				type: [String, Number],
				default: '',
			},
			planID: {
				required: false,
			},
			newOrOldCars: {
				required: false,
			},
			customerTypeCode: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		dicts: ['reason_for_early_return'],
		data() {
			return {
				form: {
					newTemplateObj: null,
					specialAgreement: null,
					remark: null,
					contractAnnex: null,
					contractContent: null,
					onlyThis: 2,
					overdue: 1,
					overdueParam: null,
					offsite: 1,
					offsiteParam: null,
					overmileageFee: 1,
					overmileageFeeParam: null,
					lateFee: 1,
					lateFeeParam: null,
					overdueRules: 1,
					overdueRulesType: 1,
					overdueRulesParam: null,
					overdueRulesParam1: null,
					overdueRulesParam2: null,
					earlyReturn: 1,
					earlyReturnRules: [],
					annex: null,
				},
				rules: {
					'newTemplateObj.value': [
						{
							required: true,
							message: '请选择新合同模版',
							trigger: ['blur', 'change'],
						},
					],
					specialAgreement: [
						{
							required: true,
							message: '请输入特殊约定',
							trigger: 'blur',
						},
					],
					remark: [
						{
							required: true,
							message: '请输入说明',
							trigger: 'blur',
						},
					],
				},
				list: [],
				isUpdate: Math.random(),
				loading: false,
			};
		},
		computed: {},
		watch: {
			customerId: {
				handler(val) {
					if (!this.isNull(val)) {
						this.getTemplateList();
					} else {
						this.list = [];
					}
				},
				immediate: true,
			},
			planID: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
			newOrOldCars: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
			customerTypeCode: {
				handler(val) {
					if (this.notEmpty(this.customerId)) {
						this.getTemplateList();
					}
				},
			},
		},
		methods: {
			downloadTemplate() {
				this.$emit('downTemplate', this.form?.newTemplateObj?.value);
			},
			initForm() {
				this.form = {
					newTemplateObj: null,
					specialAgreement: null,
					remark: null,
					contractAnnex: null,
					contractContent: null,
					onlyThis: 2,
					overdue: 1,
					overdueParam: null,
					offsite: 1,
					offsiteParam: null,
					overmileageFee: 1,
					overmileageFeeParam: null,
					lateFee: 1,
					lateFeeParam: null,
					overdueRules: 1,
					overdueRulesType: 1,
					overdueRulesParam: null,
					overdueRulesParam1: null,
					overdueRulesParam2: null,
					earlyReturn: 1,
					earlyReturnRules: [],
					annex: null,
				};
			},
			changeOverdueRulesType(val) {
				this.$refs.form3.validateField(['overdueRulesParam1', 'overdueRulesParam2']);
			},
			//公司标准模版合同详情
			getCompanyContractTemplateDetail(newTemplateObj) {
				let templateId = newTemplateObj?.value;
				contractTemplateApi.contractTemplateDetails(templateId).then(res => {
					const data = res.data;
					this.form.overdue = data?.overdue;
					this.form.overdueParam = data?.overdueParam;
					this.form.offsite = data?.offsite;
					this.form.offsiteParam = data?.offsiteParam;
					this.form.overmileageFee = data?.overmileageFee;
					this.form.overmileageFeeParam = data?.overmileageFeeParam;
					this.form.lateFee = data?.lateFee;
					this.form.lateFeeParam = data?.lateFeeParam;
					this.form.overdueRules = data?.overdueRules;
					this.form.overdueRulesType = data?.overdueRulesType;
					if (data.overdueRulesParam) {
						if (data.overdueRulesType == 1) {
							this.$set(this.form, 'overdueRulesParam1', data.overdueRulesParam);
						} else if (data.overdueRulesType == 2) {
							this.$set(this.form, 'overdueRulesParam2', data.overdueRulesParam);
						}
					}
					this.form.earlyReturn = data?.earlyReturn;
					if (data.earlyReturnRules && data.earlyReturnRules.length > 0) {
						this.form.earlyReturnRules = data.earlyReturnRules.map(item => {
							this.$set(item, 'leaseTerm', [item.minLeaseTerm, item.maxLeaseTerm]);
							return item;
						});
					} else {
						this.form.earlyReturnRules = [];
					}
				});
			},

			//获取其他生效合同模版
			getTemplateList() {
				this.loading = true;
				this.form.newTemplateObj = {
					contractTemplateId: '',
					contractTemplateCode: '',
					contractTemplateName: '',
					raw: {},
				};
				getCompanyStandards({
					applicationNo: this.applicationNo,
					customerId: this.customerId,
					planId: this.planID,
					newOrOldCars: this.newOrOldCars,
					customerType: this.customerTypeCode,
				})
					.then(res => {
						this.list = res.data;
					})
					.finally(() => {
						this.loading = false;
					});
			},
			uploadSuccess(data) {
				this.form.contractContent = data?.richText;
				this.form.contractAnnex = data?.ossId;
			},
			// 查看合同模版详情
			goTemplateDetail() {
				this.$emit('getContractContent', this.form?.newTemplateObj?.value);
			},
			// 添加规则
			addEarlyReturnRules() {
				const ruleObj = {
					reasonForEarlyReturn: null,
					selected: 1,
					minLeaseTerm: null,
					maxLeaseTerm: null,
					liquidatedDamagesScale: null,
					leaseTerm: [],
				};
				if (this.form.earlyReturnRules == null) {
					this.form.earlyReturnRules = [];
				}
				this.form.earlyReturnRules.push(ruleObj);
			},
			// 删除规则
			deleteEarlyReturnRules(index) {
				this.form.earlyReturnRules.splice(index, 1);
			},
			//租期发生改变
			changeLeaseTerm(row, val) {
				row.minLeaseTerm = val[0] ?? null;
				row.maxLeaseTerm = val[1] ?? null;
			},
			getForm() {
				return this.form;
			},
			saveForm() {
				let flag = false;
				this.$refs['form3'].validate(valid => {
					if (valid) {
						flag = true;
					} else {
						flag = false;
					}
				});
				if (flag) {
					if (this.form.overdueRulesType == 1) {
						this.form.overdueRulesParam = this.form?.overdueRulesParam1;
					} else if (this.form.overdueRulesType == 2) {
						this.form.overdueRulesParam = this.form?.overdueRulesParam2;
					}
					console.log('表单3||4-----', this.form);
					return this.form;
				}
			},
			validData(rule, value, callback, switchStatus) {
				if (
					switchStatus == 1 &&
					rule.required &&
					(!value || (rule.type = 'array' && value.length == 0))
				) {
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
			validData1(rule, value, callback, switchStatus, type) {
				if (
					switchStatus == 1 &&
					type == this.form.overdueRulesType &&
					rule.required &&
					!value
				) {
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
			validData2(rule, value, callback, switchStatus, type) {
				if (
					switchStatus == 1 &&
					type == this.form.overdueRulesType &&
					rule.required &&
					!value
				) {
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
			//逾期还车输入校验
			checkOverdueParam() {
				checkNumberInput(this.form.overdueParam, newValue => {
					if (newValue > 10000) {
						this.form.overdueParam = 10000;
					} else {
						this.form.overdueParam = newValue;
					}
				});
			},
			overdueParamBlur(event) {
				const value = event.target.value;
				if (value != '' && value != null && value < 0.01) {
					this.form.overdueParam = 0.01;
				}
			},

			//异地还车规则输入校验
			checkOffsiteParam() {
				checkNumberInput(this.form.offsiteParam, newValue => {
					this.form.offsiteParam = newValue;
				});
			},

			//滞纳金规则输入校验
			checkLateFeeParam() {
				console.log('1111', this.form.lateFeeParam);
				checkNumberInput(this.form.lateFeeParam, newValue => {
					if (newValue > 10000) {
						this.form.lateFeeParam = 10000;
					} else {
						this.form.lateFeeParam = newValue;
					}
					console.log('222', this.form.lateFeeParam);
				});
			},
			lateFeeParamBlur(event) {
				const value = event.target.value;
				if (value != '' && value != null && value < 0.01) {
					this.form.lateFeeParam = 0.01;
				}
			},

			//超公里费规则输入校验
			checkOvermileageFee() {
				checkNumberInput(this.form.overmileageFeeParam, newValue => {
					this.form.overmileageFeeParam = newValue;
				});
			},

			//校验违约金比例
			checkLiquidatedDamagesScale(event, index) {
				const newValue = checkListNumberInput(event);
				if (newValue > 10000) {
					this.form.earlyReturnRules[index].liquidatedDamagesScale = 10000;
				} else {
					this.form.earlyReturnRules[index].liquidatedDamagesScale = newValue;
				}
			},
			liquidatedDamagesScaleBlur(event, index) {
				const value = event.target.value;
				if (value != '' && value != null && value < 0.01) {
					this.form.earlyReturnRules[index].liquidatedDamagesScale = 0.01;
				}
			},
		},
		mounted() {
			// this.getTemplateList();
		},
	};
</script>

<style lang="scss" scoped>
	.agreedItem {
		box-sizing: border-box;
		padding: 10px 20px 0;
		border-radius: 6px;
		border: 1px solid #dadada;
		margin-bottom: 20px;
		height: 106px;
		font-size: 14px;
		color: #333333;

		.titleInfo {
			margin-bottom: 8px;

			.ruleTitle {
				font-weight: bold;

				&::before {
					content: '*';
					color: #f5222d;
					position: relative;
					top: 2px;
					margin-right: 4px;
				}
			}
		}

		.agreedContent {
			//margin-top: 15px;
		}
	}

	::v-deep .el-radio {
		color: #606266;
		font-weight: 500;
		line-height: 1;
		position: relative;
		cursor: pointer;
		display: inline-block;
		white-space: nowrap;
		outline: none;
		font-size: 14px;
		margin-right: 30px;
		-moz-user-select: none;
		-webkit-user-select: none;
		display: flex;
	}

	::v-deep .el-radio__label {
		font-size: 14px;
		padding-left: 10px;
		position: relative;
		top: -10px;
	}
</style>
